import { Button } from 'antd-mobile'
import { List, Avatar } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import img from '../../img/image.png'
import img1 from '../../img/order-image1.png'
import img2 from '../../img/order-image2.png'
import img3 from '../../img/order-image3.png'
import img4 from '../../img/order-image4.png'
import img5 from '../../img/order-image5.png'
import img6 from '../../img/my.png'
import { SetOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { useEffect, useRef, useState } from 'react'
import style from './index.module.css'
function Index() {
  const nav = useNavigate()
  const data = [
    {
      img: img,
      name: '在线询问'
    },
    {
      img: img1,
      name: '健康档案'
    },
    {
      img: img2,
      name: '用药建议'
    },
    {
      img: img3,
      name: '优选订单'
    },
    {
      img: img4,
      name: '我的医生'
    },
    {
      img: img5,
      name: '随访计划'
    },
  ]
  const [showBar, setShowBar] = useState<boolean>(false)
  const lastYRef = useRef<number>(0)
  const rafIdRef = useRef<number | null>(null)
  useEffect(() => {
    const handleScroll = () => {
      const y = window.pageYOffset || window.scrollY || 0
      if (rafIdRef.current != null) return
      rafIdRef.current = window.requestAnimationFrame(() => {
        const last = lastYRef.current
        const scrollingDown = y > last
        // 初始进来隐藏；仅当向下滚动且不在顶部时显示；上滑或到顶隐藏
        setShowBar(scrollingDown && y > 0)
        lastYRef.current = y
        rafIdRef.current = null
      })
    }
    window.addEventListener('scroll', handleScroll, { passive: true })
    // 初始化（保持隐藏）
    lastYRef.current = window.pageYOffset || window.scrollY || 0
    return () => {
      if (rafIdRef.current != null) {
        window.cancelAnimationFrame(rafIdRef.current)
        rafIdRef.current = null
      }
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <div>
      <div className={style.box}>
           <div className={`${style.navbarContainer} ${showBar ? style.navbarVisible : style.navbarHidden}`}>
        <Nabar title='我的' />

      </div>
        <div className={style.userInfoContainer}>
          {/* 头像 */}
          <div className={style.userAvatarContainer}>
            <Avatar src='' />
            <span className={style.userName}>名字</span>
          </div>
          <div className={style.settingsIcon}>
            <span><SetOutline /></span>
          </div>
        </div>
        <div className={style.memberCard}>
          <div className={style.memberInfo}>
            <div>
              <img src={img6} alt="" />
            </div>

            <span className={style.memberText}>会员</span>
          </div>
          <div>
            <Button block shape='rounded' size='small' className={style.privilegeButton}>
              权益中心
            </Button>
          </div>
        </div>
      </div>

      <div className={style.functionGrid}>
        {
          data.map((item, index) => {
            return <div key={index} className={style.functionItem}>
              <ul className={style.functionItemList}>
                <li><img src={item.img} alt="" className={style.functionItemIcon} /></li>
                <li className={style.functionItemText}>{item.name}</li>
              </ul>
            </div>
          })
        }
      </div>
      <List>
        <List.Item onClick={() => nav('/address')}>
          收货地址
        </List.Item>
        <List.Item onClick={() => nav('/card')}>
          我的卡券
        </List.Item>
        <List.Item onClick={() => { }}>
          门诊预约
        </List.Item>
        <List.Item onClick={() => nav('/public_Notice')}>
          价格公示
        </List.Item>
        <List.Item onClick={() => { }}>
          意见反馈
        </List.Item>
        <List.Item onClick={() => nav('/agreement')}>
          用户协议
        </List.Item>
        <List.Item onClick={() => nav('/privacy_Policy')}>
          隐私协议
        </List.Item>
        <List.Item onClick={() => nav('/about_us')}>
          关于我们
        </List.Item>
      </List>

    </div>
  )
}
export default Index